vue+微信支付目录+JSSDK签名解决方案
遇坑如下
注意:此方法仅为个人总结,并非唯一解决方案
- 微信JSSDK签名出错
- 微信支付 调起支付缺少API参数
- 微信支付目录配置,只有5个配置,可能超过5个地方有配置,路由规划
- 微信授权回调处理
我所使用的技术
-
vue路由模式 history 模式,有两点好处
- history路由模式好看
- history模式下可以保持页面后退时,上一个页面的滚动条位置
- 微信JSSDK,图片上传,地理位置获取,微信支付等功能
- UI框架,采用vux
相应的处理方法(作为一个非专业的前端,只能苦苦研究了)
微信JSSDK签名出错
微信官方说明如下
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)由此可知,对于vue等SPA应用,Android和IOS 要做不同的处理了
经过反复测试实验,发现以下问题
- IOS首次调用签名验证方法后,路由变化可不再需要签名验证
- Android 随着路由变化,每次都需要签名验证
至此,解决方案已经出炉
- vue提供vue-router。主要是用router.beforeEach,每当用户第一次进来时,去获取一次签名验证。注意:只获取一次,这样IOS签名就解决了。
- Android下,则需要每个页面去获取签名
- 注意:每次签名时,都要执行wx.config()方法,用以更新签名配置
微信支付相关(支付目录配置)
问题描述
- 微信支付目录要求最多配置5个目录
- 支付目录 必须细分到二级或以上
支付目录配置规则示例
你的支付目录如下:
例1:http://pandao.github.io/show/base
- 支付配置:http://pandao.github.io/show
例2:http://pandao.github.io/pay/show?a=2&b=3
- 支付配置 http://pandao.github.io/pay/
- 应该发现其中的规律了吧,配置到 最后一个""/"的后面。
解决方案
- 将所有支付页面的路由,统一加上“/pay/”,响应的参数变更,以?a=b等
- 效果例如
- http://pandao.github.io/pay/s...
- http://pandao.github.io/pay/s...
- 最后 配置路径为 http://pandao.github.io/pay/
微信授权回调
问题描述
vue history模式,需要配合后端服务器配置才能生效
相应的配置示例
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Nginx
location / {
try_files $uri $uri/ /index.html;
}
我采用的nginx的配置
- 为了将前后台路由上区分开,微信端我的路由,均已 url/weixin/param这样区分
所以我的配置为
location ^~ /weixin/ {
try_files $uri $uri/ /index.html;
}
- 意思是,只要访问路由是 /weixin/这样的路由,均请求html静态文件,这样,不会影响,同一个域名下,接口,后台等请求连接
前言铺垫够多了,下面说说 授权回调的解决方案
- 其实很简单:例如我去请求 url/access?return_url='url/weixin/index'
- 看出来解决方法了吗,就是去授权方法的地方,先去授权,拿到授权后,再回调 return_url 中携带的回调地址
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。